<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="text/javascript" src="../js/vue.js"></script>
    <title>Document</title>
</head>

<body>
    <!--
        常用的生命周期钩子:
        1.mounted:发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】
        2.beforeDestroy:清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】。
            关于销毁Vue实例I
        1.销毁后借助vue开发者工具看不到任何信息。
        2.销毁后自定义事件会失效，但原生DOM事件依然有效。
        3.一般不会再beforeDestroy操作数据，因为即便操作数据，也不会再触发更新流程了。
    -->
    <div id="app">
        <h2>消息为:{{msg}}</h2>
        <button @click="add">提交</button>
        <button @click="destroy">销毁</button>
    </div>

</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            msg: 'Hello Vue!',
        },
        methods: {
            add(){
                this.msg += "1";
            },
            destroy(){
                this.$destroy()
                console.log("已经销毁了");
            }
        },
        // template:`<div>
        //     <a href="https://www.baidu.com">123</a>
        //     <button>确认</button>
        // </div>`,

        //beforeCreate 之前是Vue初始化生命周期事件
        beforeCreate() {
            console.log("beforeCreate")
            //console.log(this);
            //debugger;
            //这个时候还没有开始数据代理、也检测不到数据方法 具体可以查看this里的值
        },
        //created之前就开始初始化数据代理和数据检测
        created() {
            console.log("created")
            // console.log(this);
            //debugger;
             //这个时候已经开始 数据代理、也检测的到vue的methods下的方法了
        },
        //有一个逻辑判断，判断当前Vue有没有配置el的值，如果没有配置再查看vm有没有进行 vm.$mount(el)的操作
        //如果2个情况都没有那么，Vue到created就结束了,不会再继续Vue下其他生命周期的函数了
        //在有el的情况下，查看Vue下有没有template属性，没有的话就替换容器内部的内容，有的话依据template下的元素全部替换(最外层的#app也会替换掉)，注意点：template下的元素需要有个根元素

        //在进行完成上面2个判断后，虚拟dom已经生成完毕，已经生成在内存中了，但是还没有挂载到页面中，数据也没有解析完成
        beforeMount() {
            console.log("beforeMount")
            //console.log(this);
            //debugger;
            //document.querySelector("h2").innerText='123'
            //此时可以依据上面的js脚本修改DOM结构，但是最终都不会奏效，因为在这个阶段还没有进行页面挂载的操作，此时的dom最终都会被替换掉
        },
        mounted() {
            console.log("mounted")
            //debugger;
            //document.querySelector("h2").innerText='123'
            //此时进行DOM操作的话是生效的，因为页面已经被挂载完毕了，但是不太推荐直接通过脚本修改dom结构
            //但是可以进行一些定时器、发送网络请求、订阅消息、绑定自定义事件的初始化操作
        },
        
        beforeUpdate() {
            console.log("beforeUpdate")
            //debugger
            console.log(this.msg)
            //在数据修改时会触发这个事件，但是有一个注意点为，能检测到数据的变更但是页面此时还没有进行数据更新
        },
        updated() {
            console.log("updated")
            //debugger
            console.log(this.msg)
            //此时页面更新了数据也更新了
        },
        beforeDestroy() {
            console.log("beforeDestroy")
            this.add()
            //debugger
            //在销毁之前仍然可以调用数据及方法，但是不能对数据进行修改调整的操作
            //这边一般用于结束定时器，取消订阅事件等方法 
        },
        destroyed() {
            console.log("beforeDestroy")
            //销毁完毕没有任何可以执行的操作
        },
        
        
        
        
    })
</script>

</html>